<template>
  <div class="form-container">
    <h2 class="form-title" style="margin-left: 40%;">单位信息录入</h2>
    <!-- 添加或修改单位审核对话框 -->
    <el-form ref="unitRef" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item label="单位名称" prop="unitIngc">
        <el-input v-model="form.unitIngc" placeholder="请输入单位名称" />
      </el-form-item>
      <el-form-item label="单位地址" prop="unitAddress">
        <el-input v-model="form.unitAddress" placeholder="请输入单位地址" />
      </el-form-item>
      <el-form-item label="单位电话" prop="workPhone">
        <el-input v-model="form.workPhone" placeholder="请输入单位电话" />
      </el-form-item>
      <el-form-item label="创建时间" prop="creationTime">
        <el-date-picker clearable v-model="form.creationTime" type="date" value-format="YYYY-MM-DD"
          placeholder="请选择创建时间" />
      </el-form-item>
      <el-form-item label="修改时间" prop="modifyTime">
        <el-date-picker clearable v-model="form.modifyTime" type="date" value-format="YYYY-MM-DD"
          placeholder="请选择修改时间" />
      </el-form-item>
    </el-form>

    <div class="button-container">
      <el-button type="primary" @click="submitForm">确定</el-button>
      <el-button @click="cancel">返回</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { addAudit } from "@/api/unit/unit";
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { FormInstance } from "element-plus";

const dialogVisible = ref(false);
const form = reactive({
  name: "",
  unitIngc: "",
  unitAddress: "",
  workPhone: "",
  creationTime: "",
  modifyTime: ""
});
const rules = reactive({
  name: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
  unitName: [{ required: true, message: "单位名称不能为空", trigger: "blur" }],
  unitAddress: [{ required: true, message: "单位地址不能为空", trigger: "blur" }],
  workPhone: [{ required: true, message: "单位电话不能为空", trigger: "blur" }],
  creationTime: [{ required: true, message: "创建时间不能为空", trigger: "blur" }],
  modifyTime: [{ required: true, message: "修改时间不能为空", trigger: "blur" }]
});

const unitRef = ref<FormInstance>();

function cancel() {
  window.location.href = '/home'
}

/** 提交按钮 */
function submitForm() {
  unitRef.value?.validate((valid) => {
    if (valid) {
      addAudit(form).then(() => {
        ElMessage.success("新增成功");
        dialogVisible.value = false;
        // Assuming getList is a function that fetches data and updates the UI
        getList();
      });
    }
  });
}

function getList() {
  // Implement this function to fetch data
}
</script>

<style scoped>
.form-container {
  width: 100%;
  max-width: 600px;
  /* Adjust max-width as per your design */
  margin: 0 auto;
  /* Center align horizontally */
}

.button-container {
  text-align: center;
  /* Center align buttons */
  margin-top: 20px;
  /* Optional margin top */
}
</style>
